<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部banner -->
    <a-layout-content class="relative h-[500px]" :style="{ background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)' }">
      <a-row class="container mx-auto px-4 py-16" align="middle" justify="end">
        <a-col :span="5">
          <a-image
            :width="300"
            :height="300"
            src="https://picsum.photos/200/300"
            alt="学生"
            :preview="false"
            class="rounded-1xl shadow-1xl hover:shadow-2xl transition-all duration-500 transform hover:scale-105"
          />
        </a-col>
        <a-col :span="13">
          <a-typography>
            <a-typography-title :level="1" class="!text-white text-4xl font-extrabold mb-8 animate__animated animate__fadeInDown">
              传智专升本集训式备考氛围
            </a-typography-title>
            <a-tag color="white" class="px-10 py-5 rounded-full hover:scale-110 transition-all duration-500 cursor-pointer shadow-lg">
              <span class="text-[#1890ff] text-3xl font-semibold">吃住学一体化·沉浸式学习</span>
            </a-tag>
          </a-typography>
        </a-col>
      </a-row>
      <a-row class="absolute bottom-8 w-full" justify="center" :gutter="8">
        <a-col v-for="i in 6" :key="i">
          <a-badge
            :class="[i === 1 ? 'scale-125' : 'opacity-50', 'hover:opacity-100 transition-all duration-300']"
            status="default"
            color="white"
          />
        </a-col>
      </a-row>
    </a-layout-content>

    <!-- 认识院校 -->
    <a-space direction="vertical" class="w-full mx-auto py-16 px-32" :size="24">
      <a-typography>
        <a-typography-title :level="2" class="text-center mb-4">认识院校从这里开始</a-typography-title>
        <a-typography-paragraph class="text-center text-gray-500 mb-12"
          >我们为每位学员提供专业的升学规划与学习指导，助力实现升学梦想</a-typography-paragraph
        >
      </a-typography>
      <a-row :gutter="24" align="middle">
        <a-col :span="12">
          <a-card class="bg-gray-100 p-8 rounded-lg">
            <div class="flex items-center space-x-4 mb-4">
              <a-image
                src="https://picsum.photos/500/340"
                alt="院校邦"
                :preview="false"
                class="rounded-1xl shadow-1xl hover:shadow-2xl transition-all duration-500 transform hover:scale-105"
              />
            </div>
            <a-divider />
            <a-typography-text type="secondary">CSS</a-typography-text>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card class="p-8 rounded-lg shadow-lg h-full">
            <a-space direction="vertical" class="w-full" :size="16">
              <a-row justify="space-between" align="middle">
                <a-typography-title :level="4" class="!mb-0">最新动态</a-typography-title>
                <a-typography-link type="secondary">查看更多 >></a-typography-link>
              </a-row>
              <a-list
                :split="false"
                :data-source="[
                  'Java版任务必看吗？？',
                  '一位高3DS、AI就能做个PPT？再也不用做必干了！',
                  '基于AI大模型开发的大大场！学科共享！全国高校IT骨干教师培训',
                  '直播你们来了！邀请好友反馈抽第一名送礼品！！！',
                  'AIGC爆火！80%的大学生都应用过！再设计AI版为你的工具人！',
                  '传智教育院校招聘力培训制度完美！Python+大数据校内实习实训',
                  '看招生培训能否突破，深圳就位增长163%！',
                  '传智教育院校招聘设AI创新实训师培训，助力广州理工学院艺术学院',
                ]"
              >
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-typography-text>{{ item }}</a-typography-text>
                  </a-list-item>
                </template>
              </a-list>
            </a-space>
          </a-card>
        </a-col>
      </a-row>
    </a-space>
    <!-- 合作模式 -->
    <a-space direction="vertical" class="w-full bg-white py-20 px-96" :size="24">
      <a-typography>
        <a-typography-title :level="3" class="text-center mb-12">合作模式</a-typography-title>
      </a-typography>
      <a-row :gutter="[32, 32]">
        <a-col :span="8" v-for="(item, index) in cooperationModes" :key="index">
          <div class="flex flex-col items-center">
            <a-image :src="item.icon" class="h-[20px] w-[20px] object-cover" :preview="false" :alt="item.title" />
            <a-typography-text class="text-base mt-4 text-center text-gray-500">{{ item.title }}</a-typography-text>
          </div>
        </a-col>
      </a-row>
    </a-space>

    <!-- 原创教材 -->
    <a-space direction="vertical" class="w-full bg-white py-16" :size="24">
      <a-typography class="text-center">
        <a-typography-title :level="3" class="!mb-4">原创教材</a-typography-title>
        <a-typography-text type="secondary" class="mb-12">打造专业教材体系，助力教学创新发展</a-typography-text>
      </a-typography>
      <div class="max-w-7xl mx-auto px-8">
        <a-row :gutter="[24, 24]" justify="center">
          <a-col :span="6" v-for="(item, index) in statistics" :key="index" class="text-center">
            <a-typography-title :level="3" class="!mb-2 !font-normal">{{ item.value }}</a-typography-title>
            <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
          </a-col>
        </a-row>
      </div>
    </a-space>
    <a-space direction="vertical" class="w-full bg-white py-16">
      <div class="max-w-[1440px] mx-auto px-2">
        <a-row justify="space-between" align="middle" class="mb-8">
          <a-col>
            <a-typography>
              <a-typography-title :level="4" class="!mb-0">
                热门教材 <a-typography-text type="secondary">— POPULAR TEACHING MATERIAL</a-typography-text>
              </a-typography-title>
            </a-typography>
          </a-col>
          <a-col>
            <a-button type="text" class="text-gray-500">查看更多>></a-button>
          </a-col>
        </a-row>
        <a-row :gutter="[24, 24]" justify="center">
          <a-col :span="6" v-for="(book, index) in 4" :key="index">
            <a-card hoverable class="text-center">
              <template #cover>
                <a-space direction="vertical" class="relative w-full">
                  <a-tag color="red" class="flex justify-center z-10 w-[80px] mb-[20px] mx-auto" :bordered="false">热门</a-tag>
                  <a-image
                    :src="`https://picsum.photos/200/300?random=${index + 10}`"
                    :width="150"
                    class="h-[300px] object-cover mb-[20px]"
                    :preview="false"
                  />
                </a-space>
              </template>
              <a-card-meta>
                <template #title>
                  <a-typography-text class="text-base font-medium">{{
                    ['《Java基础入门》', '《Android项目实战—手机安全卫士》', '《Android移动应用基础教程》', '《AMiRitS#JF (HTML+CSS) 》'][
                      index
                    ]
                  }}</a-typography-text>
                </template>
                <template #description>
                  <a-space direction="vertical" class="mb-[20px] px-[65px]">
                    <a-typography-text type="secondary" class="text-sm">{{
                      [
                        '荣获第四届中国大学生出版社图书奖优秀畅销书二等奖',
                        '荣获中国电子教育学会2017年全国电子信息类优秀教材评选二等奖',
                        '荣获中国铁道出版社优秀双效出版物奖奖项',
                        '荣获中国铁道出版社优秀双效出版物奖奖项',
                      ][index]
                    }}</a-typography-text>
                  </a-space>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-space>
    <!-- 实习实训 -->
    <a-space direction="vertical" class="w-full bg-white py-16">
      <div class="max-w-[1440px] mx-auto px-2">
        <a-typography class="text-center">
          <a-typography-title :level="4" class="!mb-4">
            实习实训 <a-typography-text type="secondary"></a-typography-text>
          </a-typography-title>
          <a-typography-text type="secondary" class="mb-8">面对高校IT专业学生就业难题，传智院校邦与高校开展实习实训项目</a-typography-text>
        </a-typography>
        <a-row justify="space-between" align="middle" class="mb-8">
          <a-col>
            <a-typography>
              <a-typography-title :level="4" class="!mb-0">
                实习实训 <a-typography-text type="secondary">— TRAINING REPORT</a-typography-text>
              </a-typography-title>
            </a-typography>
          </a-col>
          <a-col>
            <a-button type="text" class="text-gray-500">查看更多>></a-button>
          </a-col>
        </a-row>
        <a-row :gutter="[24, 24]" justify="center">
          <a-col :span="6" v-for="(item, index) in 4" :key="index">
            <a-card hoverable class="h-full">
              <template #cover>
                <a-image
                  :src="`https://picsum.photos/300/200?random=${index + 20}`"
                  :alt="item.title"
                  class="w-full h-[200px] object-cover"
                  :preview="false"
                />
              </template>
              <a-card-meta class="px-6 py-4">
                <template #title>
                  <a-typography-text class="text-base font-medium text-gray-800">{{
                    ['传智院校邦与厦门工学院达成实训…', '广东交通职业技术学院', '传智院校邦与安阳工学院达成实习…', '敬请期待'][index]
                  }}</a-typography-text>
                </template>
                <template #description>
                  <a-typography-text type="secondary" class="text-sm text-gray-600">{{
                    [
                      '2018年9月份，传智院校邦与厦门工学院达成实训合作。',
                      '传智院校邦与广东交通职业技术学院达成实习实训合作。院校邦派遣优秀的专业技能讲师为厦门工学院的学生进行JavaEE、Web.',
                      '2018年11月份，安阳工学院学生参与传智播客举办的实习实训，本次实训获得创新工场及中关村管委会的支持。',
                      '敬请期待',
                    ][index]
                  }}</a-typography-text>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-space>

    <!-- 师资培训 -->
    <a-space direction="vertical" class="w-full py-16">
      <div class="max-w-[1440px] mx-auto px-2">
        <a-typography class="text-center">
          <a-typography-title :level="4" class="!mb-4">
            师资培训 <a-typography-text type="secondary"></a-typography-text>
          </a-typography-title>
          <a-typography-text type="secondary" class="mb-8">助力专业教师提升教学能力和专业素养</a-typography-text>
        </a-typography>
        <a-carousel autoplay>
          <div v-for="(item, index) in 3" :key="index" class="w-[100%]">
            <a-image
              :src="`https://picsum.photos/1800/400?random=${index + 30}`"
              class="w-[100%] h-[400px] object-cover mx-auto"
              :preview="false"
            />
          </div>
        </a-carousel>
      </div>
    </a-space>
    <div class="flex justify-center py-8">
      <a-button class="bg-[#1E293B] hover:bg-[#334155] text-white border-none rounded-full px-8" size="large">查看更多师资培训</a-button>
    </div>
    <!-- 产学合作 -->
    <div class="py-16">
      <div class="max-w-[1440px] mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">产学合作</h2>
        <div class="text-center text-gray-500 mb-8">基于"双师型"校企合作模式的实践教学体系</div>
        <a-row>
          <a-col :span="24">
            <div class="flex gap-4 justify-between">
              <div v-for="(image, index) in Cooperation" :key="index" class="w-1/5 flex flex-col items-center group bg-white pb-2">
                <a-image
                  :src="`https://picsum.photos/300/120?random=${index + 40}`"
                  class="h-[120px] w-full object-cover transition-all duration-300 group-hover:shadow-lg"
                  :preview="false"
                />
                <a-typography-text class="mt-2 text-sm text-gray-600">
                  {{ image.title }}
                </a-typography-text>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="flex justify-center py-8">
      <a-button class="bg-[#1E293B] hover:bg-[#334155] text-white border-none rounded-full px-8" size="large">产学合作介绍</a-button>
    </div>
  </div>
</template>

<script setup lang="jsx">
const cooperationModes = ref([
    { title: '图书教材', icon: 'https://picsum.photos/100/100?book' },
    { title: '师资培训', icon: 'https://picsum.photos/100/100?teacher' },
    { title: '实习实训', icon: 'https://picsum.photos/100/100?training' },
    { title: '专业共建', icon: 'https://picsum.photos/100/100?build' },
    { title: '就业合作', icon: 'https://picsum.photos/100/100?job' },
    { title: '产教融合', icon: 'https://picsum.photos/100/100?fusion' }
])

const statistics = ref([
    { value: '134+', label: '开设课程数量' },
    { value: '2483+', label: '已出版教材数量' },
    { value: '300+', label: '实训人数' },
    { value: '660+', label: '教材使用量' }
])

const currentIndex = ref(0)
const Cooperation = ref([
    { title: '教学内容与课程体系改革', icon: 'https://picsum.photos/100/100?book' },
    { title: '师资培训', icon: 'https://picsum.photos/100/100?teacher' },
    { title: '实践条件和实践基地建设', icon: 'https://picsum.photos/100/100?training' },
    { title: '新工科建设', icon: 'https://picsum.photos/100/100?build' },
    { title: '创新创业教育改革', icon: 'https://picsum.photos/100/100?job' },
])

</script>

<style></style>